<template>
  <el-dialog
    title="移动"
    :visible.sync="dialogVisible"
    width="500px"
    id="move"
    :before-close="handleClose"
  >
    <div class="ovs">
      <div class="list" v-for="(item, idx) in arr" :key="idx">
        <p @click="item.active =!item.active">{{ item.title }}</p>
        <div v-if="item.active">
          <div v-for="(item2, index) in item.list" :key="index">
            <p  @click="item2.active =!item2.active">{{ item2.name }}</p>
            <div  v-if="item2.active">
              <p v-for="(item3, index2) in item2.list2" :key="index2">
                {{ item3.name }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog-footer">
      <el-button class="btn2"> 新建文件夹 </el-button>

      <span>
        <el-button class="btn" @click="dialogVisible = false;$emit('colseFn')">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false;$emit('colseFn')" >确认</el-button
        >
      </span>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      arr: [
        {
          title: "相册",
          active:true,
          list: [
            {
              name: "小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012",
              active:true,
              list2: [
                {
                  name: "小时候照片2012",
                },
                {
                  name: "小时候照片2012",
                },
                {
                  name: "小时候照片2012",
                },
                {
                  name: "小时候照片2012",
                },
                {
                  name: "小时候照片2012",
                },
                {
                  name: "小时候照片2012",
                },
              ],
            },
            {
              name: "小时候照片2012",
              active:true,
              list2: [
                {
                  name: "小时候照片2012",
                },
                {
                  name: "小时候照片2012",
                },
                {
                  name: "小时候照片2012",
                },
                {
                  name: "小时候照片2012",
                },
                {
                  name: "小时候照片2012",
                },
                {
                  name: "小时候照片2012",
                },
              ],
            },
            {
              name: "小时候照片2012",
               list2: [
                {
                  name: "小时候照片2012",
                },
                {
                  name: "小时候照片2012",
                },
                {
                  name: "小时候照片2012",
                },
                {
                  name: "小时候照片2012",
                },
                {
                  name: "小时候照片2012",
                },
                {
                  name: "小时候照片2012",
                },
              ],
            },
           
          ],
        },
        {
          title: "相册",
          active:true,
          list: [
            {
              name: "小时候照片2012",
            },
            {
              name: "小时候照片2012",
            },
            {
              name: "小时候照片2012",
            },
            {
              name: "小时候照片2012",
            },
            {
              name: "小时候照片2012",
            },
            {
              name: "小时候照片2012",
            },
          ],
        },
        {
          title: "相册",
          active:true,
          list: [
            {
              name: "小时候照片2012",
            },
            {
              name: "小时候照片2012",
            },
            {
              name: "小时候照片2012",
            },
            {
              name: "小时候照片2012",
            },
            {
              name: "小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012小时候照片2012",
            },
            {
              name: "小时候照片2012",
            },
          ],
        },
      ],
    };
  },
  mounted() {},
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.$emit('colseFn')
    },
  },
};
</script>
<style lang="less" scoped>
#move {
  text-align: left;
  .dialog-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .btn2 {
      color: #2f7df9;
      border: 1px solid #2f7df9;
      text-align: center;
    }
    .btn {
      background-color: rgba(153, 153, 153, 1);
      color: rgba(255, 255, 255, 1);
    }
  }
  .ovs {
    overflow-x: scroll;
    overflow-y: scroll;
    height: 500px;
  }
  .list {
    p {
      background: url("~@/assets/31.png") no-repeat left 20px center;
      background-size: 20px 20px;
      color: rgba(102, 102, 102, 1);
      font-size: 14px;
      padding: 13px;
      padding-left: 52px;
      cursor: pointer;
      word-break: keep-all;
    }
    p:hover {
      background: url("~@/assets/32.png") no-repeat left 20px center;
      background-size: 20px 20px;
      color: rgba(47, 125, 249, 1);
      background-color: rgba(245, 248, 255, 1);
    }
    div {
      padding-left: 20px;
      
    }
  }
}
</style>
